<template>
	<div class="xieyi w944">
		<alert ref="alert"></alert>
		<deleteAlert ref="deleteAlert"></deleteAlert>
		<div class="label_top">
			<p><i class="line"></i>协议管理</p>
		</div>
		<div class="label_table">
			<div class="el-tabs-report clearFix">
				<a class="listOne" @click="createXieyi">新增协议</a>
				<span>请勿擅自删除协议，将会给前端带来许多不便</span>
			</div>
			<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
				<el-table-column prop="title" label="协议标题"></el-table-column>
				<el-table-column prop="nickname" label="内容预览">
					<template slot-scope="scope">
						<el-button @click="handleReview(scope.row)">预览</el-button>
						<el-button @click="handleCopy(scope.row)" v-model="copy" id="copyContent">复制地址</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="140">
					<template slot-scope="scope">
						<el-button @click="handleEdit(scope.row)">编辑</el-button>
						<el-button @click="handleDelete(scope.row)" class="red">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="fenyeMargin">
				<div class="pag_block">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	import deleteAlert from '../../components/deleteAlert.vue';
	export default {
		data() {
			return {
				xieyi:'',
				id:'',
				copyData:null,
				tableData:[],
				pagesize: 15,
		        currentpage: 1,
		        total: 1
			}
		},
		methods: {
			getTableList() {
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/userAgreement/selectUserAgreement",
					headers: {'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: {
						page:this.currentpage,
						num:this.pagesize
					},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
						}
					}
				});
			},
			createXieyi(){
				this.$router.push({
					name:'createXieyi'
				})
			},
			handleEdit(row){
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/userAgreement/userAgreementMore?id="+row.id,
					headers: {'ContentType': 'application/json; charset=utf-8'},
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.$router.push({
								name: 'createXieyi',
								params: {
									type: 'edit'
								}
							})
							this.$root.xieyiMsg = res.data.data;
						}
					}
				});
			},
			handleDelete(row){
				this.transitionRow = row;
				this.$rootFunction().rootDelete();
			},
			deleteSubmit(){
				let arr = [];
				arr.push(this.transitionRow.id);
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/userAgreement/deleteUserAgreement",
					headers: {'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: {ids:arr},
					success: res => {
						if(res.data.code == 200) {
							this.$rootFunction().deleteResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			handleReview(row){
				window.open(row.url);
			},
			handleCopy(row){
				this.copyData = row.url
      			this.copy(this.copyData)
			}, 
			copy(data){
        		let url = data;
        		let oInput = document.createElement('input');
        		oInput.value = url;
        		document.body.appendChild(oInput);
        		oInput.select();
        		document.execCommand("Copy"); 
        		this.$message({
          			message: '复制成功',
          			type: 'success'
        		});
        		oInput.remove()
      		},
			handleSelectionChange(val) {
				this.multipleSelection = [];
				for(var i = 0;i<val.length;i++){
					var s={id:val[i].id}
					this.multipleSelection.push(s)
				}
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getTableList();
			}
		},
		components: {
			alert,
			deleteAlert
		},
		mounted: function() {
			this.getTableList();
			this.xieyi = this.$root.huasan.xieyi;
		}
	}
</script>
<style type="text/css">
	.xieyi .el-tabs-report span{float:right;color: #666;}
</style>